<template>
    <div class="forget">
         <div class="note_all">
            <div class="note_top">
                <div class="note_back" @click="back"></div>
            </div>
            <div class="welcome">
                你好<br/>
                欢迎来到寻匠之美
            </div>
            <div class="phone"> 
                <input type="text"  v-model.trim="phone" oninput = "value=value.replace(/[^\d]/g,'')" v-on:input="canon"   class="reg_inp" maxlength="11"  placeholder="请输入手机号">
            </div>
            <div class="verify">
                <input type="text" v-model.trim="verify" class="reg_inp" v-on:input="canon" placeholder="请输入验证码" maxlength="6" ref="inputs">
                <div class="verify_div">
                    <input type="button" class="verify_btn" :value="btntxt" :disabled="!disabled"   @click="getCode">
                </div>
            </div>     
            <div class="password">
                <input :type="inputType" v-model.trim="password" class="reg_inp" v-on:input="canon" placeholder="请输入新密码" maxlength="12">
                <div :class="eye?'see':'eye'" @click="showPass"></div>
            </div>    
            <div class="reg_div">
                <input type="button" :class="rule?'reg_true':'reg_btn'" value="完成"  :disabled="!rule"  @click="login"> 
            </div>
        </div>           
    </div>
</template>
<script>
    export default {
        name: 'Forget',
        data () {
             return {
                btntxt:"获取验证码",
                disabled:false,
                phone:"",
                verify:"",
                password:"",
                rule:false,
                time:0, 
                inputType:'password',  
                eye:true,            
             }
        },
        console(){
            document.title="忘记密码";
        },
        methods:{
            back(){
                this.$router.go(-1);
            },
            showPass(){
                this.eye=!this.eye;
                if (this.eye) {
                    this.inputType = 'password'
                } else {
                    this.inputType = 'text'
                }
            },
            canon(){
                if(this.phone.length==11&&this.password.length>=6&&this.verify.length>0){
                    this.rule=true;
                }else{
                    this.rule=false;
                }
                if(this.phone.length==11){
                    this.disabled=true;
                }else{
                    this.disabled=false;
                }
            },
            //获取验证码
            getCode(){
                
                this.$axios.post('/v1/common/sendCode',{
                    mobile: this.phone,
                    type:2,
                }).then(res => {
                    var result=res.data;
                    if(result.code==200){
                        Toast('验证码发送成功，请在手机端查收');
                        this.time=60;
                        this.timer();
                        this.$refs.inputs.focus();
                    }else{
                        Toast(result.msg);
                    }
                }, res => {
                        console.log("error");
                });
            },
            timer() {
                if (this.time > 0) {
                    this.time--;
                    this.btntxt=this.time+"s后重新获取";
                    this.disabled=false;
                    setTimeout(this.timer, 1000);
                } else{
                    this.time=0;
                    this.btntxt="获取验证码";
                    if(this.phone.length==11){
                        this.disabled=true;
                    }else{
                        this.disabled=false;
                    }                   
                }
            },
            login(){
                this.$axios.post('/v1/common/findPassword',{                  
                    mobile: this.phone,
                    password:this.password,
                    code:this.verify,
                }).then(res => {          
                    var result=res.data;
                    if(result.code==200){
                         this.$router.go(-1);
                        // this.$router.push({path:'/login'});    
                    }else if(res.data.code==10000){
                         Toast(res.data.msg);
                         this.$router.push({path:'/login'});
                    }else{
                        Toast(result.msg)
                    }
                }, res => {
                    console.log("error");
                });
            },
        },
    }
</script>
<style scoped>
.forget{width:100%;position: fixed;height:100%;}
.note_all{width:698px;margin:0 auto;}
.note_top{margin-top:30px;}
.note_back{width:48px;height:48px;background:url("/static/images/team_go_back.png") no-repeat center center;background-size:100% 100%; }
.welcome{font-size:52px;color:#333333;font-weight:bold;margin-top:56px;margin-bottom:60px;}
.reg_inp{border:none;width:100%;height:104px;border-bottom:2px solid #ECECEC;font-size:32px;}
.verify{position: relative;}
.verify_btn{background:#FFF;padding:12px 8px;border:2px solid #4A4A4A;font-size:24px;color:#000000;text-align: center;border-radius:4px;position: absolute;right:0;top:26px;cursor:pointer;outline:0px; -webkit-appearance:none;}
.reg_btn{width:100%;height:98px;line-height:100px;border-radius:50px;text-align:center;font-size:32px;color:#4A4A4A;background:#ECECEC;margin-top:70px;cursor:pointer;outline:0px; -webkit-appearance:none;border:none;}
.reg_true{width:100%;height:98px;line-height:100px;border-radius:50px;text-align:center;font-size:32px;color:#333334;background:#FFE514;margin-top:70px;cursor:pointer;outline:0px; -webkit-appearance:none;border:none;}
.see{width:48px;height:48px;background:url("/static/images/see.png") no-repeat center center;background-size:100% 100%;position: absolute;right:0;top:34px;}
.eye{width:48px;height:48px;background:url("/static/images/eye.png") no-repeat center center;background-size:100% 100%;position: absolute;right:0;top:34px;}
.password{position: relative;}
</style>